<template>
    <div class="box" ref="charts"></div>
</template>

<script setup lang="ts">
//引入echarts
import *as echarts from 'echarts';
import { ref, onMounted, watch } from 'vue';

let charts = ref();
let mycharts;
//封装函数
const getOption = () => {
    return {
        xAxis: {
            type: 'category',
            show: false,
            boundaryGap: false,
        },
        yAxis: {
            show: false,
        },
        series: {
            type: 'line',
            data: props.data,
            smooth: true,
            itemStyle: {
                opacity: 0,
            },
            areaStyle: {
                //渐变
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: "yellow",
                        },
                        {
                            offset: 1,
                            color: "#bfa",
                        },
                    ],
                    global: false,
                },
            },
        },
        //图标布局
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            show: true,
            //底层颜色
            backgroundColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: '#bfa',
                    },
                    {
                        offset: 1,
                        color: '#bfa',
                    },
                ],
                global: false,
            },
        },
        tooltip: {
            trigger: 'axis',
            confine: true,
        },
    };
};

onMounted(() => {
    //初始化echarts实例
    mycharts = echarts.init(charts.value);
    //设置配置项
    mycharts.setOption(getOption());

    window.addEventListener('resize', () => {
        mycharts.resize();
    })
});

let props = defineProps(['data']);
watch(
    () => props.data,
    () => {
        mycharts.setOption(getOption());
    }
);
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #ccc;
}
</style>